<meta charset="UTF-8">
<div class="pd-10 system" id="add-directive-wraper">
    <h3 class="h3-title" style="height: 32px;margin-bottom: 10px">编辑指令 <span style="float: right;"><i-button style="width: 100%" @click="back">返回</i-button></span> </h3>
    <div style="width: 700px;margin: 0 auto;">

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                <i style="color: red;display: inline-block;">*</i>&nbsp;设备类型 : &nbsp;</i-col>
            <i-col span="20">
                <i-select v-model="deviceType">
                    <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                <i style="color: red;display: inline-block;">*</i>&nbsp;指令类型 : &nbsp;</i-col>
            <i-col span="20">
                <!-- <i-select v-model="cmdCode" filterable>
                    <i-option v-for="item in listCmdAction" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select> -->
                <div class="search-wrapper">
                    <i-input v-model.trim="cmdCodeName" :icon="iconState" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" @on-click="focus"></i-input>
                    <transition name="fade">
                        <ul class="search-item-wrapper" v-show="isShowMatchDev" style="cursor: pointer;">
                            <li v-for="item in cmdList" style="padding:5px 10px;" @click="selectedCmd(item)">
                                <div :value="item.value" :key="item.label">
                                    <span style="cursor: pointer;">{{ item.label }}</span>
                                </div>
                            </li>
                        </ul>
                    </transition>
                </div>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令名称 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="cmdname"></i-input>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;是否同步 : &nbsp;</i-col>
            <i-col span="20" style="height: 100%;line-height:32px;">
                <Checkbox v-model="isSync">(选中为同步)</Checkbox>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令描述 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="cmddescr"></i-input>
            </i-col>
        </Row>

        <Row style="margin:10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令密码 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="cmdpwd"></i-input>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">参数类型 : &nbsp;</i-col>
            <i-col span="20">
                <i-select v-model="selectParamType">
                    <i-option value="text">文本输入</i-option>
                    <i-option value="list">下拉选择</i-option>
                </i-select>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:100%;">
                参数 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="params" type="textarea" :rows="8" />
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:100%;">预览 : &nbsp;</i-col>
            <i-col span="20" v-if="selectParamType==='text'">
                <Row style="margin: 5px 0" v-for="item in previewObjList" :key="item.text">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        {{item.title}} : &nbsp;
                    </i-col>
                    <i-col span="15">
                        <i-input v-model.trim="item.value"></i-input>
                    </i-col>
                </Row>
            </i-col>
            <i-col span="20" v-if="selectParamType==='list'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <i-select v-model="preview">
                            <i-option v-for="item in previewObjList" :value="item.type" :key="item.type">{{ item.value }}</i-option>
                        </i-select>
                    </i-col>
                </Row>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="10" :offset="8">
                <i-button icon="md-add" @click="handleEditDirective" style="width: 100%">提交</i-button>
            </i-col>
        </Row>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#add-directive-wraper",
            data: function() {
                return {
                    readonly: true,
                    iconState: "ios-arrow-down",
                    cmdCode: null,
                    deviceType: null,
                    cmdname: "",
                    cmdpwd: "",
                    cmddescr: null,
                    cmddescren: "",
                    cmddescrtw: "",
                    common: 0,
                    params: null,
                    paramsen: "",
                    paramstw: "",
                    previewObjList: [],
                    isShowMatchDev: false,
                    isPublic: false,
                    isSync: false,
                    kong: "",
                    deviceTypeList: [],
                    listCmdAction: [],
                    selectParamType: '',
                    preview: null,
                    timeoutIns: null,
                    cmdCodeName: "",
                    cmdList: []
                }
            },
            watch: {
                params: function() {
                    this.previewObjList = [];
                    if (this.params == "") {
                        return;
                    }
                    if (this.checkFormatCorrect(this.params.trim())) {
                        var params = "<params>" + this.params + "</params>";
                        var parser = new DOMParser();
                        var xmlDoc = parser.parseFromString(params, "text/xml");
                        this.parseXML(xmlDoc);
                    }
                },
                isShowMatchDev: function() {
                    if (!this.isShowMatchDev) {
                        this.iconState = "ios-arrow-down";
                    } else {
                        this.iconState = "ios-arrow-up";
                    }
                }
            },
            methods: {
                selectedCmd: function(item) {
                    var me = this;
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                        me.cmdCodeName = item.label;
                        me.cmdCode = item.value;
                    }, 300)
                },
                filterMethod: function(value) {
                    var list = [];
                    value = value.toLowerCase();
                    this.listCmdAction.forEach(function(itme) {
                        if (
                            itme.label.indexOf(value) != -1 ||
                            itme.firstLetter.indexOf(value) != -1 ||
                            itme.pinyin.indexOf(value) != -1
                        ) {
                            list.push(itme);
                        }
                    })
                    this.cmdList = list;
                },
                sosoValueChange: function() {
                    var me = this;
                    var value = this.cmdCodeName;

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    }

                    if (!value.trim()) {
                        this.cmdList = this.listCmdAction;
                        return;
                    }

                    this.timeoutIns = setTimeout(function() {
                        me.filterMethod(value);
                    }, 300);
                },
                focus: function() {
                    this.readonly = false;
                    this.isShowMatchDev = true;
                },
                blur: function() {
                    this.readonly = true;
                    var me = this
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                    }, 300)
                },
                back: function() {
                    var me = this;
                    var pagePath = null
                    if (utils.isLocalhost()) {
                        pagePath = myUrls.viewhost + 'view/systemparam/devicedirective.html'
                    } else {
                        pagePath = '../view/systemparam/devicedirective.html'
                    }
                    me.$Loading.start();
                    $("#system-view").load(pagePath, function() {
                        me.$Loading.finish();
                    });
                },
                handleEditDirective: function() {

                    var me = this;
                    var url = myUrls.editCmd();
                    var data = {
                        cmdname: this.cmdname,
                        cmdcode: this.cmdCode,
                        paramsen: "",
                        paramstw: "",
                        cmddescren: "",
                        cmddescrtw: "",
                        cmdlevel: editObject.cmdlevel,
                        devicetype: this.deviceType,
                        sync: this.isSync ? 1 : 0,
                        predictcmdid: editObject.predictcmdid
                    };

                    if (this.cmddescr) {
                        data.cmddescr = this.cmddescr;
                    };

                    if (this.params) {
                        if (this.checkFormatCorrect(this.params.trim())) {
                            data.params = this.params;
                        } else {
                            this.$Message.error("参数格式错误");
                            return;
                        }
                    };
                    if (this.selectParamType) {
                        data.cmdtype = this.selectParamType;
                    };

                    data.cmdpwd = this.cmdpwd;


                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success("编辑成功");
                        } else {
                            me.$Message.error(resp.cause);
                        };
                    });
                },
                checkFormatCorrect: function(str) {
                    if (str)
                        str = str.replace(/^<[\s\S]*>[\s\S]*<\/[\s\S]*>$/g, "");
                    return str == "" ? true : false;
                },
                parseXML: function(xmlDoc) {
                    // <ha><param size="small" type="password">确认密码</param></ha>
                    var parent = xmlDoc.children[0];
                    var children = parent.children;
                    for (var i = 0; i < children.length; i++) {
                        var item = children[i]
                        var title = item.innerHTML;
                        var value = item.getAttribute("value");
                        var type = item.getAttribute("type");
                        if (type && value) {
                            this.previewObjList.push({
                                type: type,
                                value: value,
                                title: title
                            });
                        }
                    }
                },
                getCmdCodeName: function(cmdcode) {
                    var cmdCodeName = "";
                    this.cmdList.forEach(function(item) {
                        if (item.value === cmdcode) {
                            cmdCodeName = item.label;
                            return false;
                        }
                    })
                    return cmdCodeName;
                },
                setValue: function(data) {
                    this.cmdCodeName = this.getCmdCodeName(data.cmdcode);
                    this.cmdCode = data.cmdcode;
                    this.deviceType = data.devicetype;
                    this.cmdname = data.cmdname;
                    this.cmdnameen = data.cmdnameen;
                    this.cmdnametw = data.cmdnametw;

                    this.cmddescr = data.cmddescr;
                    this.cmddescren = data.cmddescren;
                    this.cmddescrtw = data.cmddescrtw;


                    this.paramsen = data.paramsen;
                    this.paramstw = data.paramstw;
                    this.common = data.common;
                    this.isSync = data.sync == 1 ? true : false

                    this.cmdpwd = data.cmdpwd;

                    if (data.params) {
                        var paramsArr = data.params.split('\n');
                        if (data.cmdtype !== 'text' && data.cmdtype !== 'list') {
                            this.params = data.params;
                        } else {
                            this.params = paramsArr.join("\n");
                            this.selectParamType = data.cmdtype;
                        }
                    };
                },
                getDeviceType: function() {
                    var me = this;
                    var url = myUrls.queryDeviceTypeByUser();
                    utils.sendAjax(url, {}, function(resp) {
                        if (resp.status == 0 && resp.devicetypes != null) {
                            resp.devicetypes.forEach(function(item) {
                                me.deviceTypeList.push({
                                    value: item.devicetypeid,
                                    label: item.typename
                                });
                            })
                            me.getListCmdAction();
                        }
                    });
                },
                getListCmdAction: function() {
                    var me = this;
                    var url = myUrls.listCmdAction();
                    utils.sendAjax(url, {}, function(resp) {
                        if (resp.status == 0) {
                            resp.cmds.forEach(function(item) {
                                var cmdName = item.cmdName;
                                var firstLetter = __pinyin.getFirstLetter(cmdName);
                                var pinyin = __pinyin.getPinyin(cmdName);
                                me.listCmdAction.push({
                                    value: item.cmdCode,
                                    label: cmdName,
                                    firstLetter: firstLetter,
                                    pinyin: pinyin
                                });
                            })
                            me.cmdList = me.listCmdAction;
                            me.setValue(editObject)
                        }
                    });
                }
            },

            mounted: function(param) {
                this.getDeviceType();

            }
        })
    </script>
</div>